import React, { useEffect, useState } from "react";
import { get, post } from "@api/request";

const Home = () => {
  const [datas, setDatas] = useState([])
  const [showAdd, setShowAdd] = useState(false)
  const [updIds, setUpdIds] = useState([])
  const getDatas = async () => {
    const res = await get({
      url: '/api/dr'
    })
    if (res && res.code === '000000') {
      setDatas(res.data || [])
    }
  }
  const handleAdd = () => {
    setShowAdd(true)
  }
  const handleSubmit = async () => {
    const form = document.getElementById('addForm')
    const formFields = form.elements
    const params = {
      name: formFields.name.value,
      url: formFields.url.value,
      country: formFields.country.value,
    }
    const res = await post({
      url: '/api/add',
      data: params,
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    })
    if (res && res.code === '000000') {
      getDatas()
      formFields.name.value = ''
      formFields.url.value = ''
      formFields.country.value = ''
      setShowAdd(false)
    }
  }
  const handleDel = async(d) => {
    const data = {
      Id: d.Id
    }
    const res = await post({
      url: '/api/delete',
      data,
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    })
    if (res && res.code === '000000') {
      getDatas()
    }
  }
  const handleUpd = (d) => {
    updIds.push(d.Id)
    setUpdIds([...updIds])
  }
  const doUpdFetch = async (d) => {
    const form = document.getElementById('addForm')
    const formFields = form.elements;
    const params = {
      name: formFields.name.value,
      url: formFields.url.value,
      country: formFields.country.value,
      Id: d.Id
    }
    const res = await post({
      url: '/api/update',
      data: params,
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    })
    if (res && res.code === '000000') {
      getDatas()
    }
  }
  useEffect(() => {
    getDatas()
  }, [])
  return (
    <div>
      <button onClick={handleAdd}>新增+</button>
      {datas.map(d => (
        <div key={d.Id} className="relative border-solid border-1 border-[#ddd] mb-5 p-4">
          <div>名称：{d.name}</div>
          <div>链接：{d.url}</div>
          <div>国家：{d.country}</div>
          <button className="absolute top-5 right-5" onClick={() => handleDel(d)}>删除</button>
          <button className="absolute top-12 right-5" onClick={() => handleUpd(d)}>修改</button>
          <form
            id={`addForm_Id_${d.Id}`}
            hidden={!updIds.includes(d.Id)}
            className="absolute top-1.5 left-1.5 w-full h-20"
          >
            <label>名称：</label><input type="text" name="name" placeholder="请输入"></input><br />
            <label>链接：</label><input type="text" name="url" placeholder="请输入"></input><br />
            <label>国家：</label><input type="text" name="country" placeholder="请输入"></input>
            <input type="button" onClick={handleSubmit} value="提交"></input>
          </form>
        </div>
      ))}
      
      <form id="addForm" name="formData" hidden={!showAdd}>
        <label>名称：</label><input type="text" name="name" placeholder="请输入"></input><br />
        <label>链接：</label><input type="text" name="url" placeholder="请输入"></input><br />
        <label>国家：</label><input type="text" name="country" placeholder="请输入"></input>
        <input type="button" onClick={handleSubmit} value="提交"></input>
      </form>
    </div>
  )
}

export default Home